<template>
  <el-row style="padding: 5px">
    <el-row>
      <el-card>
        <el-form :inline="true" :model="this.staffParams" class="" size="small">
          <el-form-item label="员工名称">
            <el-input v-model="staffParams.staffName" placeholder="请输入员工名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="selectStaffData">搜索</el-button>
            <el-button type="" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" plain icon="el-icon-plus" @click="addStaffData(1)" v-hasPermi="['agriculture:staff:add']">新增</el-button>
           <button_disbable></button_disbable>
<!--            <el-button type="warning" plain icon="el-icon-download">导出</el-button>-->
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top: 5px">
      <el-card>
        <el-table :data="tableData.slice((currentPage -1) *pageSize,currentPage*pageSize)" border style="width: 100%">
          <el-table-column align="center" prop="staffPosition" label="员工职位" ></el-table-column>
          <el-table-column align="center" prop="staffName" label="员工名称"></el-table-column>
          <el-table-column align="center" prop="staffTel" label="员工联系方式"></el-table-column>
          <el-table-column align="center" prop="staffDes" label="员工描述"></el-table-column>
          <el-table-column align="center" prop="status" label="是否可用">
            <template slot-scope="scope">
              <el-switch
              v-model="scope.row.status = 1? true : false">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-edit" class="mini_Button" @click="updateStaffData(scope.row,1)" v-hasPermi="['agriculture:staff:edit']">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" class="mini_Button" @click="deleteStallData(scope.row.staffId)" v-hasPermi="['agriculture:staff:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin: 20px 0; float: right"
          :current-page.sync="currentPage"
          background
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="this.tableData.length">
        </el-pagination>
      </el-card>
    </el-row>

    <el-dialog  :visible.sync="this.dialog" width="30%">
      <template v-slot:title>
        <div style="color: black;font-weight:1000; font-size: 20px;">{{dialogTitle}}</div>
      </template>
      <el-form :model="this.addStaff">
        <el-form-item  :label-width="300">
          <template v-slot:label><i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>员工职位</template>
          <el-input v-model="addStaff.staffPosition" autocomplete="off" style="width:70%" placeholder="请输入员工职位"></el-input>
        </el-form-item>
        <el-form-item  :label-width="300">
          <template v-slot:label><i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>员工名称</template>
          <el-input v-model="addStaff.staffName" autocomplete="off" style="width:70%" placeholder="请输入员工名称"></el-input>
        </el-form-item>
        <el-form-item :label-width="300">
          <template v-slot:label><i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>联系方式</template>
          <el-input v-model="addStaff.staffTel" autocomplete="off" style="width:70%" placeholder="请输入员工联系方式"></el-input>
        </el-form-item>
        <el-form-item :label-width="300">
          <template v-slot:label><i class="el-icon-star-on" style="font-size: 10px ;color: red"></i>员工描述</template>
          <el-input v-model="addStaff.staffDes" type="textarea"  autocomplete="off" style="width:70%" rows="=2" placeholder="请输入员工描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog=false">取 消</el-button>
        <el-button type="primary" @click="handleButtonClick">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>
<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Template from "@/views/iot/template/index.vue";
import {addStaff, delStaff, listStaff ,updateStaff} from "@/api/agriculture/staff";
import button_disbable from "@/views/agriculture/buttonDis/button_disbable.vue";
import Button_disbable from "@/views/agriculture/buttonDis/button_disbable.vue";
export default {
  components: {Button_disbable, Template},
  data() {
    const initialAddData={
      staffPosition:'',
      staffName:'',
      staffTel:'',
      staffDes:'',
      remark:'',
      status:'',
      orderNum:'',
      delFlag:'',
    }
    return {
      currentPage:1,
      pageSize:10,
      dialogTitle:'',
      dialog:false,
      addStaff:{...initialAddData},
      initialAddData,
      staffParams: {
        staffName:'',
        },
      addOrUpdate:'',
      tableData: [],
      requiredFields:{  staffPosition:'请填写员工职位', staffName:'请填写员工名称', staffTel:'请填写联系方式',staffDes:'请填写员工描述'}
    }
  },
  async mounted() {
    await this.getStaffList()
  },
  methods:{
    // 对话框确定按钮选择监听修改或新增
    handleButtonClick() {
      if (this.addOrUpdate === 1) {
        this.updateStaffData(this.addStaff,2)
      } else {
        this.addStaffData(2);
      }
    },
    // 警告消息
    openMessage(type,mes) {
      this.$notify({
        title: '提示',
        message: mes,
        offset: 30,
        type: type
      });
    },
    // 新增
   async addStaffData(buttonId)
    {
      if(buttonId == 1) {this.addStaff = { ...this.initialAddData };this.dialogTitle ='添加溯源人员';this.dialog= true; this.addOrUpdate = 0}
      else if(buttonId == 2) {
        for (let field of Object.keys(this.requiredFields)) {
          if (!this.addStaff[field]) {
            this.openMessage('warning', this.requiredFields[field]);
            return;
          }
        }
        try {
          await addStaff(this.addStaff)
          this.openMessage('success', '添加成功！');
          await this.getStaffList()
          this.addStaff={...this.initialAddData}
          this.dialog = false
        } catch (error) {
          console.error('添加溯源人员错误:', error);
          this.openMessage('error', '添加失败！');
        }
      }
    },
    // 修改溯源人员
    async updateStaffData(row,buttonId)
    {
      if(buttonId == 1) {this.addStaff= {...row} ;this.addStaff.status='';this.dialogTitle ='修改溯源人员';this.dialog=true;this.addOrUpdate = 1 }
      else if(buttonId == 2){
        for (let field of Object.keys(this.requiredFields)) {
          if (!this.addStaff[field]) {
            this.openMessage('warning', this.requiredFields[field]);
            return;
          }
        }
        try {
          await updateStaff(this.addStaff)
          this.openMessage('success', '修改成功！');
          await this.getStaffList()
          this.dialog = false
        }catch (error){
          console.error('Error occurred while update sellpro:', error);
          this.openMessage('error', '修改失败！');
        }
      }
    },
    // 查询溯源人员
    async selectStaffData(row)
    {
      await this.getStaffList()
    },
    // 重置
    resetForm()
    {
       this.staffParams.staffName=''
      this.getStaffList()
    },
    // 获取溯源人员列表
    async getStaffList()
    {
      const row = await listStaff(this.staffParams)
      this.tableData = row.rows
    },
    // 删除溯源人员
    async deleteStallData(id)
    {
      this.$confirm('确认删除？')
        .then(async _ => {
          try {
            delStaff(id)
            this.openMessage('success', '删除成功！');
            await this.getStaffList()
          } catch (error) {
            console.log("溯源版本删除错误:", error)
            this.openMessage('error', '删除失败！');
          }
        }).catch(_ => {
        return
      });
    },
  }
}
</script>
<style scoped>
.mini_Button{
  font-size:11px;
  padding: 4px 9px
}
</style>
